import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  FlatList,
  ActivityIndicator,
} from 'react-native';
import MenuLayout from '../../components/MenuLayout';
import {useContext, useState, useEffect} from 'react';
import {ThemeContext} from '../../components/ThemeContextProvider';
import CheckCard from './components/CheckCard';
import Tabs from '../../components/Tabs';
import OutModal from './components/OutModal';
import EmptyListComponent from '../../components/EmptyListComponent';
import toastShow from '../../utils/toastShow';
import {storeSaveTakeGoodsApi} from '../../api/check';
import {observer} from 'mobx-react-lite';
import CheckStore from './CheckStore';
const store = CheckStore
const Check = observer(() => {
  const {theme} = useContext(ThemeContext);
  const styles = StyleSheet.create({
    root: {
      width: '100%',
      height: '100%',
    },
    header: {
      height: 60,
      backgroundColor: theme.themeColor,
      justifyContent: 'center',
      borderBottomWidth: 1,
      borderColor: theme.dividerColor,
    },
    headerTitle: {
      fontSize: 16,
      color: theme.fontColor,
      marginLeft: 20,
      fontWeight: '700',
    },
    searchWrap: {
      flexDirection: 'row',
      marginLeft: 20,
      marginTop: 20,
    },
    iconfont: {
      fontFamily: 'iconfont',
      fontSize: 20,
      color: theme.font3Color,
    },
    inputWrap: {
      width: 320,
      height: 44,
      borderRadius: 22,
      borderWidth: 1,
      borderColor: theme.dividerColor,
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 20,
    },
    ml10: {
      marginLeft: 10,
    },
    addBtn: {
      marginLeft: 20,
      width: 100,
      height: 44,
      borderRadius: 12,
      backgroundColor: theme.primaryColor,
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'row',
    },
    addBtnTextIcon: {
      color: theme.themeColor,
      fontSize: 14,
    },
    addBtnText: {
      color: theme.themeColor,
      marginLeft: 2,
    },
    tabsWrap: {
      paddingHorizontal: 20,
      marginTop: 10,
    },
    loadingWrap: {
      flex: 1,
      width: '100%',
      justifyContent: 'center',
      alignItems: 'center',
    },
    scroll: {
      flex: 1,
      width: '100%',
    },
  });
  const tabsList = [
    {name: '正常', id: '1'},
    {name: '过期', id: '2'},
  ];
  const [activeId, setActiveId] = useState('1');
  useEffect(() => {
    store.getData();
  }, []);
  /**
   * 取出弹窗
   */
  const [outEditInfo, setOutEditInfo] = useState({
    goods_info: {},
    user_info: '',
    qty: '',
    id: '',
  });
  const [outShow, setOutShow] = useState(false);
  // 取出确定事件
  const outOkHandle = async params => {
    try {
      await storeSaveTakeGoodsApi(params);
      toastShow('取出成功');
      store.reloadHandle();
      setOutShow(false);
    } catch (e) {
      console.log(e);
    }
  };
  return (
    <MenuLayout active="Check">
      <View style={styles.root}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>寄存列表</Text>
        </View>
        <View style={styles.searchWrap}>
          <View style={styles.inputWrap}>
            <Text style={styles.iconfont}>{'\ue6b3'}</Text>
            <TextInput
              placeholder="搜索顾客名称或手机号"
              style={styles.ml10}></TextInput>
          </View>
          <TouchableOpacity
            activeOpacity={0.8}
            style={styles.addBtn}
            onPress={() => {
              toastShow('请输入数量');
            }}>
            <Text style={[styles.iconfont, styles.addBtnTextIcon]}>
              {'\ue600'}
            </Text>
            <Text style={styles.addBtnText}>新建寄存</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.tabsWrap}>
          <Tabs
            list={tabsList}
            activeId={activeId}
            onChange={({id}) => {
              setActiveId(id);
            }}></Tabs>
        </View>
        {store.loading ? (
          <View style={styles.loadingWrap}>
            <ActivityIndicator
              color={theme.primaryColor}
              size="large"></ActivityIndicator>
          </View>
        ) : (
          <FlatList
            refreshing={store.loading}
            style={styles.scroll}
            numColumns={4}
            data={store.list}
            columnWrapperStyle={{
              marginTop: 10,
              marginLeft: 12,
            }}
            renderItem={({item, index, separtors}) => (
              <CheckCard
                key={item.id}
                {...item}
                outShowHandle={() => {
                  setOutShow(true);
                  setOutEditInfo(item);
                }}></CheckCard>
            )}
            ListEmptyComponent={
              <View style={{paddingTop: 100}}>
                <EmptyListComponent text="暂无寄存"></EmptyListComponent>
              </View>
            }></FlatList>
        )}

        <OutModal
          show={outShow}
          setShow={setOutShow}
          editInfo={outEditInfo}
          onOk={outOkHandle}></OutModal>
      </View>
    </MenuLayout>
  );
});

export default Check;
